<template>
	<u-navbar placeholder bgColor="#ECF5FF" autoBack>
		<template #left>
			<view></view>
			<!-- <view class="centerY">
				<image class="city" src="@/static/image/city.png" mode=""></image>
				<view class="font-32 mar-left-10">成都市招商城市主场B座</view>
			</view> -->
		</template>
	</u-navbar>
	<view class="page-box">
		<view class="pad-30">
			<up-swiper v-if="bannerList.length > 0" :display-multiple-items="1" height="300rpx" radius="30rpx"
				:list="bannerList" keyName="cover" indicator indicatorMode="line" circular></up-swiper>

			<view class="centerY notice-box mar-top-30" v-if="noticeText">
				<view class="font-28">公告:</view>
				<up-notice-bar class="custom-notice-bar" icon="" bgColor="#E9F1FF" color="#0055FE"
					:text="noticeText"></up-notice-bar>
			</view>
		</view>

		<view class="mar-top-50">
			<view v-for="item in homePromote" :key="item.id" class="list centerY" @click="hanldeHomeService(item)">
				<image class="list-image" :src="item.cover"></image>
			</view>
		</view>
		<suspend icon="/static/image/service.jpg"></suspend>

		<up-popup :show="visibelNotice" mode="center" round="10" bgColor="transparent">
			<view class="notice-bg pad-30">
				<view class="columnY centerXY">
					<image class="icon" src="/static/image/icon10.png"></image>
				</view>
				<view class="font-32 text-center mar-top-30">新用注册优惠券</view>
				<view class="mar-top-10 tips font-28 text-center">点击小程序:我的-我的优惠券可查看哦</view>
				<view class="centerX mar-top-50">
					<view @click="hanldeCouponList" class="button-style">去查看</view>
				</view>
			</view>
			<view class="centerX mar-top-30">
				<up-icon @click="hanldeVisibel" color="#FFFFFF" name="close-circle" size="30"></up-icon>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		postAllOfGroup,
		noticeList
	} from '@/api/currency.js';
	import {
		getUserCouponAll
	} from '@/api/index.js';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	const visibelNotice = ref(false);
	const hanldeUserCouponAll = () => {
		getUserCouponAll({
			use_status: 1
		}).then(res => {
			if (res.data.lists.length > 0) {
				if (!uni.getStorageSync('isShow')) {
					visibelNotice.value = true;
				}

			}
		})
	}

	const hanldeVisibel = () => {
		uni.setStorageSync('isShow', true);
		visibelNotice.value = false;
	}

	const hanldeCouponList = () => {
		visibelNotice.value = false;
		uni.setStorageSync('isShow', true);
		uni.navigateTo({
			url: '/pages/my_actions/coupon/coupon'
		})
	}

	// 获取
	const postAllOfGroupFun = async (code) => {
		let res = await postAllOfGroup({
			code
		})
		return res.data.lists;
	}

	// 获取banner
	const bannerList = ref([]);
	const noticeText = ref('');
	const homePromote = ref([]);
	// 获取页面
	const getPageInfo = async () => {
		bannerList.value = await postAllOfGroupFun('home_top_ad');
		homePromote.value = await postAllOfGroupFun('home_promote');
	}

	noticeList({
		page: 1,
		ps: 1
	}).then(res => {
		if (res.data.data.length > 0) {
			noticeText.value = res.data.data[0].title;
		}
	})

	// 跳转服务页面
	const hanldeHomeService = (item) => {
		if (item.jump_url) {
			uni.navigateTo({
				url: item.jump_url
			})
		} else {
			uni.$u.toast('敬请期待');
		}
	}

	onLoad(() => {
		getPageInfo();
	})

	onShow(() => {
		hanldeUserCouponAll();
	})
</script>

<style scoped lang=scss>
	.icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.tips {
		color: #8c8c8c;
	}

	.button-style {
		padding: 20rpx 50rpx;
	}

	:deep(.u-notice__content__text > text) {
		white-space: nowrap !important;
	}

	.city {
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.page-box {
		background: linear-gradient(180deg, #ECF5FF 0%, #FFFFFF 100%);
	}

	.list {
		width: 100%;
		height: 260rpx;
		margin-bottom: 20rpx;
	}

	.list-image {
		display: block;
		width: 100%;
		height: 260rpx;
	}

	.notice-box {
		background: #E9F1FF;
		border-radius: 40rpx;
		overflow: hidden;
		padding: 0 30rpx;
		color: #0055FE;
	}

	.notice-bg {
		width: 600rpx;
		height: 420rpx;
		display: block;
		background: #FFFFFF;
		background-size: 100% 100%;
		border-radius: 20rpx;
	}
</style>